<!--
 * @Author: wjk
 * @Date: 2020-11-30 09:13:35
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-23 10:11:51
 * @description: file content
-->
<template>
  <view>
    <base-popup :show="pShow" :type="'top'" has-scroll whole-mask :mask-index="100" :show-close="false" @close="closePopup">
      <view class="filter-list-container" @touchmove.stop="()=>{}">
        <scroll-view style="max-height: 940rpx" scroll-y>
          <slot></slot>
          <view v-for="(item, index) in filterList" :key="index" class="filter-item-box" :class="{border: index===0}">
            <view class="title">{{ item.title }}</view>
            <view v-if="item.child_categorys && item.child_categorys.length" class="filter-item-flex">
              <view v-for="(sitem, sindex) in item.child_categorys" :key="sindex" class="filter-item" :class="{active: sitem.id === selectItem}" @click="itemClick(sitem)">
                {{ sitem.title }}
              </view>
            </view>
          </view>
          <view class="filter-item-box">
            <view class="title">类型</view>
            <view class="filter-item-flex">
              <view v-for="(i, k) in types" :key="k" class="filter-item" :class="{active: i.id === selectType}" @click="typeClick(i)">
                {{ i.title }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </base-popup>
  </view>
</template>
<script>
export default {
  components: {
  },
  props: {
    from: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pShow: false,
      selectItem: '',
      selectType: '',
      listQuery: {
        page_size: 10,
        page_no: 1,
        parent_id: 1
      },
      loading: false,
      types: [
        // {
        //   title: '视频',
        //   type: 8
        // },
        // {
        //   title: '多图',
        //   type: 4
        // },
        // {
        //   title: '单图',
        //   type: 2
        // }
      ],
      filterList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.listQuery = {
        page_size: 10,
        page_no: 1,
        parent_id: 1
      }
      this.loading = false
      this.filterList = []
      this._fetchData()
    },
    async _fetchData() {
      if (this.loading) return
      this.loading = true
      const res = await this.$api.materialApi.getSubCategoryAll(this.listQuery)
      if (res.success) {
        if (this.listQuery.page_no === 1) {
          this.filterList = []
        }
        setTimeout(() => {
          this.filterList = this.filterList.concat(res.data)
          this.loading = false
        }, 200)
      }
      return res
    },
    async _fetchTypeData() {
      const res = await this.$api.materialApi.getMaterialCategory()
      // console.log(res.data)
      if (res.success && res.data) {
        const { types } = res.data
        this.types = types
        // console.log(res.data)
        //
      }
    },
    async showPopUp(id) {
      this.selectItem = id
      await this._fetchData()
      await this._fetchTypeData()
      this.pShow = true
    },
    closePopup() {
      this.pShow = false
    },
    clear() {
      this.selectItem = ''
      this.selectType = ''
    },
    itemClick(item) {
      this.clear()
      this.selectItem = item.id
      this.closePopup()
      this.$emit('selectFilter', item)
    },
    typeClick(item) {
      this.selectType = item.id
      // this.selectType = this.selectType === item.type ? '' : item.type
      this.closePopup()
      this.$emit('selectFilter', { type: this.selectType, isType: true, title: item.title })
    }
  }
}
</script>
<style lang="scss" scoped>
.filter-list-container {
  width: 750rpx;
  padding: 0 22rpx;
  box-sizing: border-box;
  background-color: #fff;
  padding-bottom: 40rpx;
  .filter-item-box {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    .title{
      margin: 30rpx 10rpx;
      font-size: 28rpx;
      color: #000;
    }
    .filter-item-flex{
      display: flex;
      flex-wrap: wrap;
      .filter-item{
        background-color: #f5f5f5;
        min-width: 140rpx;
        margin: 15rpx 8rpx;
        height: 66rpx;
        padding: 0 10rpx;
        line-height: 66rpx;
        text-align: center;
        &.active{
          color: white;
          background-color: #000;
        }
      }
    }

    &.border{
      border-top: 1px solid #ededed;
    }

  }
}
</style>
